<template>
	<!-- banner管理 -->
	<div class="page">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>banner列表</el-breadcrumb-item>
		</el-breadcrumb>
		banner列表状态：
		<el-select v-model="params.shelfStatus" placeholder="请选择" @change="getList">
			<el-option
			v-for="item in options"
			:key="item.type"
			:label="item.name"
			:value="item.type">
			</el-option>
		</el-select>
		<nav class="nav">
			<el-button size="small" icon='plus' @click="add" type="primary">添加+</el-button>
		</nav>

		<el-table ref="multipleTable" :data="goodsArr" tooltip-effect="dark" style="width: 100%">
			<el-table-column label="ID" prop="id">
			</el-table-column>
			<el-table-column prop="shelfName" label="广告名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="是否显示" show-overflow-tooltip>
				<template slot-scope="scope">
					<span @click.native="setStatus(scope.row.shelfStatus,scope.row.id)">{{scope.row.shelfStatus | filterBannerStatus}}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="sequence" label="排序" show-overflow-tooltip>
			</el-table-column>
			<el-table-column width="300px" label="操作">
				<template slot-scope="scope">
					<el-button slot="reference" @click="detail(scope.row.id)" size="mini" icon="el-icon-edit"></el-button>
					<el-button size="mini" @click="ctrlStatus(scope.row.shelfStatus,scope.row.id)">{{scope.row.shelfStatus | filterBannerStatusShow}}</el-button>
					<el-button size="mini" icon="el-icon-delete" @click="deleteItem(scope.row.id,scope.row.$index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="page-num" background layout="prev, pager, next" :page-size="page_size" @current-change="handleCurrentChange" :total="page">
		</el-pagination>
	</div>
</template>
<script>
	import bear from "../../assets/images/bear.png";
	export default {
		name: "manage",
		data() {
			return {
				params: {
					"numPerPage": 10,
					"order": "desc",
					"pageNum": 1,
  					"shelfStatus": "DBL"
				},
				options: [{
					type: 'DBL',
					name: '未激活'
				}, {
					type: 'EBL',
					name: '已激活'
				}, {
					type: 'DEL',
					name: '已删除'
				}],
				isStatus: [],
				page_size: 10, //每页显示几个
				page: 0, //总页数
				currentPage: 1, //当前页
				goodsArr:[]
			};
		},
		created() {

		},
		mounted() {
			this.getList();
		},
		filters:{
			filterBannerStatus:function(value){
				var typeArr = [{
					type: 'DBL',
					name: '未激活'
				}, {
					type: 'EBL',
					name: '已激活'
				}, {
					type: 'DEL',
					name: '已删除'
				}];
				for (var i in typeArr) {
					if (typeArr[i].type == value) {
					return typeArr[i].name;
					}
				}
			},
			filterBannerStatusShow:function(value){
				var typeArr = [{
					type: 'DBL',
					name: '去激活'
				}, {
					type: 'EBL',
					name: '取消激活'
				}, {
					type: 'DEL',
					name: '已删除'
				}];
				for (var i in typeArr) {
					if (typeArr[i].type == value) {
					return typeArr[i].name;
					}
				}
			},
			filStatusBtn:function(value){
				return value  == "TOP" ? '下架' : '发布';
			}
		},

		methods: {
			add() {
				this.$router.push('plus/addBanner');
			},
			// 开启、关闭状态
			ctrlStatus(status,id){
				console.log(status,id)
				status = status == "DBL" ? 'EBL' : 'DBL';
				this.$post("goodsShelvesControl", { 
					shelfId: id,
					shelfStatus:status
				}).then(res => {
					if(res.code == 200) {
						this.getList();
						this.$msg.success(res.message);
					} else {
						this.$msg.warning(res.message);
					}
				});
			},
			// 删除单个项
			deleteItem(id,index){
                this.$confirm('此操作将永久删除该banner, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
					this.$post("goodsShelvesDel", {shelfId:id}).then(res => {
						if(res.code == 200) {
							this.goodsArr.splice(index, 1);
							this.$msg.success('删除成功');

						} else {
							this.$msg.warning(res.message);
						}
					});
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
			},
			/*分页跳转*/
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				this.getList();
			},
			// 获取列表
			getList() {
				this.params.pageNum = this.currentPage;
				this.$post("bannerList", this.params).then(res => {
					if(res.code == 200) {
						this.goodsArr = [];
						this.page = res.data.total;
						var list = res.data.rows;
						for(var i in list) {
							this.goodsArr.push(list[i]);
						}
					} else {
						this.$msg.warning(res.message);
					}
				});
			},
			// 跳转详情页面
			detail(id) {
				this.$router.push({
					name: 'updateBanner',
					params: {
						id: id
					}
				})
			},
			// 发布
			release(item, index) {
				console.log(item.state)
				var text = item.state == "TOP" ? '下架' : '发布';
				this.$confirm('是否'+text+'该商品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$post("productStatus", {
						id: item.id
					}).then(res => {
						if(res.code == 200) {
							this.goodsArr[index].state = item.state == "TOP" ? 'DOWN' : 'TOP';
							this.$msg.success(res.message);
						} else {
							this.$msg.warning(res.message);
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消发布'
					});
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.page {
		width: 100%;
		height: 100%;
		position: relative;
		.nav {
			display: flex;
			justify-content: flex-end;
		}
	}
</style>